<template>
	<view class="my">
		<view class="top">个人中心</view>
		<!-- 头部卡片 -->
		<template>
			<view class="my_card"  v-show="!arruser">
				<view class="info pr">
					<view class="info_i">
						<img class="info_img" :src="user.pic_url" />
						<view class="info_name">{{ user.nickname }}</view>
						<view class="info_right">
							<view class="info_text">{{ user.memberLevel }}</view>
						</view>
					</view>
					<span>{{ user.mobile }}</span>
					<view class="score pa" @tap.stop="jump(integral_url)">
						<image :src="score_img" mode=""></image>
						<view class="name">积分规则</view>
					</view>
				</view>
			</view>
			<view class="my_card" v-show="arruser">
				<view class="info">
					<view class="info_name">游客123</view>
					<span>快来登入吧~</span>
				</view>
			</view>
		</template>
		<!-- 菜单 -->
		<view class="menu pr">
			<view class="menu_box">
				<view class="menu_top x-f">
					<view class="left">
						<p>兑换商品</p>
					</view>
					<view class="right x-f" @tap.stop="to_goods">
						<span class="one-t" style="width: 75%;">{{ menu.text }}</span>
						<view class="arrow_right pa" style="right: 0;">
							<image :src="arrow_right" mode=""></image>
						</view>
					</view>
				</view>
				<view class="menu_bottom">
					<grid :menu="menu.info"></grid>
				</view>
			</view>
		</view>
		<!-- 赚积分 -->
		<integrala :points="points"></integrala>
		<!-- 底部单元格 -->
		<view class="cell_group">
			<view class="cell_group_box">
				<view class="cell">
					<img :src="car_img" alt />
					<view class="info_car">
						<p>积分停车</p>
						<span>自助停车缴费，便捷生活</span>
					</view>
				</view>
				<view class="arrow_right">
					<image :src="arrow_right" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="menu">
			<grid :menu="menu_gl"></grid>
		</view>
		<buttom-tabbar></buttom-tabbar>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import grid from './grid.vue';
	export default {
		components: {
			grid
		},
		data() {
			return {
				info_url: "/pages/user/info/edit/index",        // 转积分跳转路径
				login_url: "/pages/login/index",                // 登录页跳转路由
				integral_url: '/pages/user/score/task/index',   // 跳转至积分签到页面
				arruser: {},                                    // 空用户对象
				score_img: this.imgUrl + 'score.png',           // 积分规则图标
				car_img: this.imgUrl + 'car.png',               // 积分停车图标
				arrow_right: this.imgUrl + 'arrow_right.png',   // 右侧箭头图标
			};
		},
		computed: {
			...mapState({
				menu: state => state.user.menu,              // 分类栏信息
				user: state => state.user.user,              // 用户信息
				menu_gl: state => state.user.grid,           // 九宫格信息
                points: state => state.user.user.points      // 会员剩余积分
			}),
		},
		methods: {
            // 跳转回商品页 - 同时修改tabbar下标
			to_goods() {
                this.$emit('to_goods')
                this.$store.dispatch('init/get_tabbarActive', 0);
			},
			// 修改用户信息
			jumpEdit(user, id) {
				this.$store.dispatch('init/get_user', user)
				uni.navigateTo({
					url: this.info_url + '?user.id=' + id,
				})
			},
			// 跳转路径
            jump(path, params) {
                this.$Router.push({
                    path: path,
                    params: params
                })
            }
		},
		// 初始化判断用户身份登入
		mounted() {
			this.arruser = (JSON.stringify(this.user) == "{}")
		},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>
<style>
	page {
		padding-bottom: 0;
	}
</style>
